<template>
  <div class="dashboard-container">
    <div class="app-container">
      <PageTools :show="true">
        <!-- 左边插槽 -->
        <span slot="before"> {{ YE.total }}信息 </span>
        <!-- 右边插槽 -->
        <span slot="after">
          <el-button size="mini" type="warning" @click="$router.push('/import')"
            >导入</el-button
          >
          <el-button size="mini" type="danger" @click="addDaochu"
            >导出</el-button
          >
          <el-button size="mini" type="primary" @click="xinzeng"
            >新增员工</el-button
          >
        </span>
      </PageTools>
      <!-- 下面的表格 -->
      <el-card>
        <el-table
          style="width: 100%"
          :data="list"
          :border="true"
          :default-sort="{ prop: 'date', order: 'descending' }"
        >
          <!-- 
      
     -->
          <el-table-column label="序号" type="index"> </el-table-column>
          <!-- 
      
     -->
          <el-table-column prop="username" label="姓名" sortable>
          </el-table-column>
                  <!-- 
      
     -->
          <el-table-column prop="username" label="头像" align="center">
            <template slot-scope="{row}">
  <!-- text-align: center; -->
            <img @click="erwei(row.staffPhoto)" v-imgerror="require('@/assets/common/wod.webp')" :src="row.staffPhoto" alt="" style="border-radius: 50%; width:80px; height:80px; padding: 10px; " >
            </template>
          </el-table-column>
          <!-- 

     -->
          <el-table-column prop="workNumber" label="工号" sortable>
          </el-table-column>
          <!-- 
      
     -->
          <el-table-column
            prop="formOfEmployment"
            label="聘用形式"
            sortable
            :formatter="formatterpinqing"
          >
          </el-table-column>
          <!-- 
      
     -->
          <el-table-column prop="departmentName" label="部门" sortable>
          </el-table-column>
          <!-- 
      
     -->
          <el-table-column prop="timeOfEntry" label="入职时间" sortable>
            <template slot-scope="obj">
              {{ obj.row.timeOfEntry | formatDate }}
            </template>
          </el-table-column>
          <!-- 
      
     -->
          <el-table-column prop="enableState" label="账户状态" sortable>
            <template slot-scope="obj">
              <el-switch
                :value="obj.row.enableState === 1 ? true : false"
                active-color="#13ce66"
                inactive-color="#ff4949"
              >
              </el-switch>
            </template>
          </el-table-column>
          <!-- 
      
     -->
          <el-table-column label="操作" type="flex" width="240px">
            <!-- 操作状态 -->
            <template slot-scope="obj">
              <el-link style="margin:0 6px 0 0" type="primary" @click="$router.push(`/employees/detail/${obj.row.id}`)">查看</el-link>
              <el-link style="margin:0 6px 0 0" type="success">转正</el-link>
              <el-link style="margin:0 6px 0 0" type="info">查询</el-link>
              <el-link style="margin:0 6px 0 0" type="primary">离职</el-link>
              <el-link style="margin:0 6px 0 0" type="warning" @click="cosplayan(obj.row.id)">角色</el-link>
              <el-link
                type="danger"
                @click="delEmployee(obj.row.id)"
                >删除</el-link
              >
            </template>
          </el-table-column>
        </el-table>
        <el-row type="flex" justify="center">
          <el-pagination
            layout="prev, pager, next"
            :total="1000"
            @current-change="changePage"
          >
          </el-pagination>
        </el-row>
      </el-card>
      <!-- 
引入新增员工的弹窗
       -->
      <addEmployee :addshow.sync="addshow" @FN="FN" />
    </div>
    <!-- 二维码弹窗 -->
    <el-dialog title="二维码" :visible.sync="dialogTableVisible" width="260px">
   <el-row type="flex" justify="center">
    <!-- 画布用来画二维码 -->
<canvas ref="erweima"></canvas>
   </el-row>
</el-dialog>
<!-- 角色扮演插件 -->
<CosPlay :showCosPlay.sync="showCosPlay" :userId="userId" ref="CosPlayli"/>
  </div>
</template>

<script>
// 引入api员工信息接口，删除员工接口
import { getEmployeeList, delEmployee } from "@/api/employees";
// 引入员工的聘请方式
import EmployeeEnum from "@/api/constant/employees";
// 引入新增员工弹窗组件
import addEmployee from "@/views/employees/components/add-employee.vue";
// 引入时间格式化
import {formatDate} from "@/filters/index";
// 移入二维码生成插件
import QrCode from 'qrcode'
// 引入角色分配组件
import CosPlay from "./components/cosplay.vue"
export default {
  data() {
    return {
      list: [],
      YE: {
        // 当前页
        page: 1,
        // 每一页的条数
        size: 10,
        // 总数
        total: 0,
      },
      // 新增员工弹窗
      addshow: false,
      // 二位码弹窗
      dialogTableVisible:false,
      // 点击显示角色扮演弹窗
      showCosPlay:false,
      // 接收角色的id号
      userId:null,
    };
  },
  // 注册组件
  components: {
    addEmployee,
    CosPlay,
  },
  created() {
    this.FN();
  },
  methods: {
    async FN() {
      const { total, rows } = await getEmployeeList(this.YE);
      this.YE.total = total;
      this.list = rows;

      // console.log(rows);
    },
    // 分页的变化事件
    changePage(nowde) {
      this.YE.page = nowde;
      // 重新获取视图
      this.FN();
    },
    // 带有的参数是第一个是参数的全部对象第二个是方法第三个是值第四个是索引
    formatterpinqing(row, column, cellValue, index) {
      // 创建参数接收数据
      const obj = EmployeeEnum.hireType.find((intm) => intm.id === cellValue);
      return obj ? obj.value : "暂无";
    },
    // 删除员工id
    async delEmployee(id) {
      // 判断点击结果
      try {
        // 点击出现弹窗
        await this.$confirm("此操作将永久删除该文件, 是否继续?");
        await delEmployee(id);
        // 重新获取数据
        this.FN();
        // 显示结果
        this.$message({
          message: "删除成功",
          type:"success"
        });
      } catch (eer) {
        // this.$message({
        //   message: "已取消删除",
        // });
      }
    },
    xinzeng() {
      this.addshow = true;
    },
    // 导出人员信息
    async addDaochu() {
      // 转换名称相应的数据
      const headers = {
        姓名: "username",
        手机号: "mobile",
        入职日期: "timeOfEntry",
        聘用形式: "formOfEmployment",
        转正日期: "correctionTime",
        工号: "workNumber",
        部门: "departmentName",
      };
      // 请求全部员工数据
      const { rows } = await getEmployeeList({
        page: 1,
        size: this.YE.total,
      });
      console.log(rows);
      // 创建一个方法获取到相对的数据
      const zhuan = this.formatJson(headers, rows);
      // 方法返回的是数组包裹的属性值
      console.log(zhuan);
      // 创建复杂表头
      const multiHeader =[["姓名","信息","","","","","部门"]]
      // 合并单元格
      const merges =["A1:A2","B1:F1","G1:G2"]
      // 点击引入懒加载插件导出文件
      import("@/vendor/Export2Excel").then((exports) => {
        // 导出插件
        exports.export_json_to_excel({
          // 复杂表头
          multiHeader,
          // 合并单元格
          merges,
          header: Object.keys(headers),
          data:zhuan,
          filename:"员工信息表",
        });
      });
    },
    formatJson(headers, rows) {
      return rows.map((item) => {
        // item是每一个对象
        console.log(item);
        // obj是每一个对象里面的属性名
        return Object.keys(headers).map((obj) => {
          // 这一步是每一个属性明的属性值
          // console.log(item[headers[obj]]);
          // 只一步是找到相应的时间转换成想要的时间格式
          if(headers[obj]=="timeOfEntry"||headers[obj]=="correctionTime"){
            return formatDate(item[headers[obj]])
            // 使用枚举将聘用形式改成相应的形式
          } else if(headers[obj]=="formOfEmployment"){
            const res= EmployeeEnum.hireType.find(ZHI=>ZHI.id===item[headers[obj]])
            return res?res.value:"暂无"
          }
          return item[headers[obj]];
        });
      });
    },
    // 生成二微码要先下载相应的插件
    erwei(url){
      if(url){
      // 点击显示二维码弹出层
this.dialogTableVisible=true
// 判断是否更新好了画布的dom标签
this.$nextTick(()=>{
  // 调用组件方法画出二维码第一个参数是画布标签第二个是图片地址
  QrCode.toCanvas(this.$refs.erweima,url)
})
      }else{
          this.$message.warning('该用户还未上传头像')
      }

    },
    // 弹出角色分配弹窗
 async   cosplayan(id){
      this.userId=id
      // 点击出现弹出层时调用子元素的方法
await this.$refs.CosPlayli.userMessage(id)
this.showCosPlay=true

    }
  },
};
</script>

<style>
/* a{
  width: 260px;
  height: 260px;
} */
</style>